<template>
  <div id="app">
    <div
      class="SwiperBox"
      @mouseenter="MouseFun('移入')"
      @mouseleave="MouseFun('移出')"
    >
      <!-- 图片 -->
      <div
        class="imgBox"
        :style="{ left: `-${leftVal}px`, transition: `${ition}s` }"
      >
        <img :src="item.imgUrl" v-for="(item, index) in imgList" :key="index" />
        <!-- 复制第一张放到最后,以实现无缝无线循环滚动效果 -->
        <img :src="imgList[0].imgUrl" alt="" />
      </div>
      <!-- 左箭头按钮 -->
      <div class="leftBtn" @click="throttle(PrevFun)">&larr;</div>
      <!-- 右箭头按钮 -->
      <div class="rightBtn" @click="throttle(NextFun)">&rarr;</div>
      <!-- 下方指示点容器 -->
      <div class="instBox">
        <div
          @click="instFun(index)"
          v-for="(item, index) in imgList.length"
          :key="index"
          :class="['inst', index == imgShow ? 'instActv' : '']"
        ></div>
      </div>
    </div>
    <div class="login_box">
      <h3 class="title2">欢迎登录机票预订系统</h3>
      <el-form
        :model="ruleForm2"
        :rules="rules2"
        status-icon
        ref="ruleForm2"
        label-position="left"
        label-width="0px"
        class="demo-ruleForm login-page"
      >
        <h3 class="title">&nbsp;</h3>
        <el-form-item prop="username">
          <el-input
            type="text"
            prefix-icon="el-icon-user"
            v-model="ruleForm2.username"
            auto-complete="off"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            prefix-icon="el-icon-lock"
            v-model="ruleForm2.password"
            auto-complete="off"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <Vcode :show="isShow" @success="success" @close="close" />
          <el-button
            type="danger"
            style="width: 100%"
            @click="onSubmit"
            :loading="logining"
          >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked" class="rememberme"
          >记住密码</el-checkbox
          >
          <el-button type="text" style="float: right" @click="forgetpassword"
          >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {refreshcode} from '../../api/api';
import Vcode from "vue-puzzle-vcode";
import Img1 from '../../assets/img1.png';
import Img2 from '../../assets/img2.png';
import Img3 from '../../assets/background.jpg'
export default {
  data() {
    return {
      Img1,
      Img2,
      isShow: false, // 验证码模态框是否出现
      logining: false,
      ruleForm2: {},
      rules2: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        checkPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      checked: true,
      imgList: [
        { imgUrl: require("../../assets/image/1.jpg") },
        { imgUrl: require("../../assets/image/2.jpg") },
        { imgUrl: require("../../assets/image/3.jpg") },
        { imgUrl: require("../../assets/image/4.jpg") },
        { imgUrl: require("../../assets/image/5.jpg") },
      ],
      leftVal: 0, // 轮播图盒子的偏移值
      flag: true, // 用来节流防止重复点击
      start: null, // 自动执行下一张定的时器
      imgWidth: 1500, // 在这里填写你需要的图片宽度
      ition: 0.8, // 设置轮播图过度时间
      imgShow: 0, // 表示当前显示的图片索引
    };
  },
  mounted() {
    this.autoCarousel(); // 偷偷告诉大家一个小秘密,JavaScript是原生支持中文命名函数或变量的哦
  },
  components: {
    Vcode,
  },
  methods: {
    onSubmit() {
      this.isShow = true;
    },
    // 用户通过了验证
    success(msg) {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          this.logining = true;
          var loginForm = {
            phone: this.ruleForm2.username,
            password: this.ruleForm2.password,
          };
          const _this=this;
          this.$axios.post('http://localhost:8181/passenger/login', loginForm)
            .then((resp) => {
              console.log("返回的passenger"+resp.data)
              if (Object.keys(resp.data).length==0) {
                this.$message({type: "error", message: '账号不存在或密码错误'})
                _this.logining=false
                return false;
              } else {
                this.$message({
                  type: 'success',
                  message: '登录成功',
                });
                console.log(resp.data)
                _this.passenger=resp.data
                sessionStorage.removeItem('passenger')
                sessionStorage.setItem('passenger',JSON.stringify(_this.passenger))
                this.$router.push('/IndexPage');
              }
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
    },

    handleReset2() {
      this.$refs.ruleForm2.resetFields();
    },

    refreshcode() {
      this.uuid = this.getuuid();
      var refreshParams = { code: this.ruleForm2.identifycode };
      refreshcode(refreshParams)
        .then((data) => {
          this.imgUrl = serverUrl + "" + this.uuid;
        })
        .catch((error) => {
          this.$message({
            message: "服务器请求出错，请重试！",
            type: "error",
          });
        });
    },
    forgetpassword() {
      this.$router.push({path: '/passengerRegister'});
    },
    // 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播
    MouseFun(type) {
      // 停止定时器            // 重新执行定时器
      type == "移入" ? clearTimeout(this.start) : this.autoCarousel();
    },
    // 此为自动轮播定时器
    autoCarousel() {
      this.start = setInterval(() => {
        this.NextFun();
      },4000);
    },
    // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
    throttle(fun) {
      if (this.flag) {
        this.flag = false;
        fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
        setTimeout(() => {
          this.flag = true;
        }, 1200); // 节流间隔时间
      }
    },
    // 上一张
    PrevFun() {
      if (this.leftVal == 0) {
        // 判断显示的图片 是 第一张时执行
        // this.imgList.length是指循环图片数组的图片个数
        this.ition = 0; // 将过渡时间变成0，瞬间位移到最后一张图
        this.imgShow = this.imgList.length - 1; // 将高亮小点改为最后一张图
        this.leftVal = this.imgList.length * this.imgWidth; // 瞬间移动
        setTimeout(() => {
          // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
          this.ition = 0.8;
          this.leftVal -= this.imgWidth;
        }, this.ition * 1000);
      } else {
        // 判断显示的图片 不是 第一张时执行
        this.ition = 0.8;
        this.leftVal -= this.imgWidth;
        this.imgShow--;
      }
    },
    // 下一张
    NextFun() {
      if (this.leftVal == (this.imgList.length - 1) * this.imgWidth) {
        // 判断显示的图片 是 最后一张时执行
        this.ition = 0.5;
        this.leftVal += this.imgWidth;
        this.imgShow = 0;
        setTimeout(() => {
          this.ition = 0;
          this.leftVal = 0;
        }, this.ition * 1000);
      } else {
        // 判断显示的图片 不是 最后一张时执行
        this.ition = 0.8;
        this.leftVal += this.imgWidth;
        this.imgShow++;
      }
    },
    // 点击小圆点
    instFun(index) {
      this.ition = 0.8;
      this.leftVal = index * this.imgWidth;
      this.imgShow = index;
    },
  },
};
</script>
<style>
</style>
